<template>
  <view class="nav-bar">
    <wd-navbar :title="title" :fixed="true" safeAreaInsetTop :bordered="false" :placeholder="true">
      <template #left>
        <slot name="left">
          <wd-icon name="arrow-left" size="25px" color="#fff" />
        </slot>
      </template>
    </wd-navbar>
  </view>
</template>

<script setup lang="ts">
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

interface Props {
  title: string
}
const props = withDefaults(defineProps<Props>(), {})
onMounted(() => {})
const getMenuButtonBoundingClientRect = () => {
  const systemInfo = uni.getSystemInfoSync()
  let menuButtonInfo
  try {
    menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  } catch (e) {
    // 如果获取失败，使用默认值
    console.warn('获取菜单按钮位置失败，使用默认值', e)
    menuButtonInfo = {
      top: systemInfo.statusBarHeight + 4,
      height: 32,
      right: systemInfo.windowWidth - 10,
      width: 87,
      bottom: systemInfo.statusBarHeight + 36,
      left: systemInfo.windowWidth - 97,
    }
  }
  const correctTop =
    menuButtonInfo.top > systemInfo.statusBarHeight
      ? menuButtonInfo.top
      : systemInfo.statusBarHeight +
        (menuButtonInfo.height - (systemInfo.statusBarHeight - menuButtonInfo.top))
  return {
    ...menuButtonInfo,
    top: correctTop,
    bottom: correctTop + menuButtonInfo.height,
    // 右侧到屏幕右边的距离
    right: systemInfo.windowWidth - menuButtonInfo.right,
    // 左侧到屏幕左边的距离
    left: menuButtonInfo.left,
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  :deep(.wd-navbar) {
    background-image: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
  }
  :deep(.wd-navbar__title) {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
}
</style>
